<template>
  <el-pagination
    v-model:currentPage="page.page"
    :page-sizes="[15, 25, 50, 100]"
    v-model:page-size="page.page_size"
    background
    align="right"
    layout="total, prev, pager, next, sizes"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>
<script lang="ts" setup>
  import { defineEmits, withDefaults, defineProps, watch } from 'vue'
  import { reactive, ref } from 'vue'
  const emit = defineEmits(['submit'])
  const total = ref(0)
  const page = reactive<any>({
    page: 1,
    page_size: 15
  })
  const handleSizeChange = (v: number) => {
    console.log(`页面大小 ${v}`)
    emit('submit', page)
  }
  const handleCurrentChange = (v: number) => {
    console.log(`当前页 ${v}`)
    emit('submit', page)
  }
  const onPageInit = () => {
    page.page = 1
    page.page_size = 15
  }
  defineExpose({
    total,
    onPageInit
  })
</script>
